<template>
    <div>
        <el-dialog title="选择购买时长" :visible.sync="dialogVisible" width="38%" @submit.native.prevent @close="handleClose">
            <el-table  :data="tableData" border style="width: 100%"
                :header-cell-style="{ background: '#f0f2f5' }" @row-click="singleElection" highlight-current-row>
                <el-table-column align="center" width="80" label="选择">
                    <template slot-scope="scope">
                        <el-radio class="radio" v-model="selectCode" :label="scope.row.id">
                            <span></span>
                        </el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="group" label="购买方式" align="center">
                </el-table-column>
                <el-table-column prop="money" label="积分" align="center">
                </el-table-column>
            </el-table>
            <!-- 分页 -->
            <!-- <div class="poolPage">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="params.page" :page-sizes="[10, 20, 30]" :page-size="params.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div> -->
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit()">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import {shopDetail ,shopUpdate} from "@/request/api/shopCart"
export default {
    data() {
        return {
            dialogVisible: false,
            params: {
                id:''
            },
            tableData: [],
            selectCode: '',//当前行选中的唯一标识 
            checkObj: {},//当前行选中的数据row
            form:{
                consumId: '', // 积分配置ID
                id: '' // 购物车ID
            }
        }
    },
    methods: {
        open(info) {
            this.params.id = info.productModel.id//商品id
            this.form.id = info.id
            this.dialogVisible = true
            this.getList()
        },
        // 获取物业员工列表
        getList() {
            shopDetail(this.params).then(res => {
                if (res.data.code === 1) {
                    this.tableData = res.data.data
                }
            })
        },
        // 查询
        onSubmit() {
            this.params.page = 1
            this.getList()
        },
        onReset() {
            this.form.consumId = ''
            this.params.page = 1
            this.getList()
        },
        // 选择员工
        handleSubmit() {
            if (!this.form.consumId) {
                this.$message({
                    message: '请选择！',
                    type: 'warning'
                });
                return false;
            }
            shopUpdate(this.form).then(res => {
                if (res.data.code === 1) {
                    this.$message({
                        message: '修改成功！',
                        type: "success",
                    });
                    this.dialogVisible = false
                } else {
                    this.$message.error(res.data.message);
                }
            })
        },
        //关闭弹框
        handleClose() {
            this.$emit('getShop')
            this.form.consumId = ''
            this.selectCode=''

        },
        // 选择数据
        singleElection(row) {
            this.form.consumId = row.id
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.page = 1;
            this.getList();
        },
        handleCurrentChange(val) {
            this.params.page = val;
            this.getList();
        },
    }
}
</script>
<style lang="less" scoped>
.assignDesc {
    margin-bottom: 10px;

    .assignOne {
        display: inline-block;
        vertical-align: middle;
    }

    .el-button {
        margin-left: 30px;
        display: inline-block;
        vertical-align: middle;
    }
}

.poolPage {
    margin-top: 10px;
    text-align: right;
}
</style>

